<template>
  <div class="page-container">
    <div class="form-wrapper">
      <h2 class="title">欢迎登录</h2>

      <van-form @submit="handleLogin" :validate-trigger="['onChange', 'onSubmit']">
        <!-- 账号输入 -->
        <van-field
            v-model="form.account"
            placeholder="请输入账号"
            left-icon="user-o"
            class="oval-field"
            :rules="[{ required: true, message: '请输入账号' }]"
        />

        <!-- 密码输入 -->
        <van-field
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            left-icon="lock"
            class="oval-field"
            :rules="[{ required: true, message: '请输入密码' }]"
        />



        <van-button
            block
            type="primary"
            native-type="submit"
            class="oval-btn"
            size="large"
        >
          立即登录
        </van-button>
        <!-- 记住账号选项 -->
        <div class="remember-me">
          <van-checkbox
              v-model="rememberAccount"
              shape="square"
              checked-color="#23a6d5"
          >
            记住账号
          </van-checkbox>
        </div>

        <div class="link-group">
          <span @click="$router.push('/register')">注册账号</span>
          <span @click="$router.push('/forget')">忘记密码</span>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import store from "@/store";
import md5 from 'md5';

const router = useRouter();

// 表单数据
const form = ref({
  account: '',
  password: ''
});

// 记住账号状态
const rememberAccount = ref(true);

// 组件挂载时读取存储的账号
onMounted(() => {
  const savedAccount = localStorage.getItem('rememberedAccount');
  if (savedAccount) {
    form.value.account = savedAccount;
    rememberAccount.value = true;
  }
});

// 登录处理
const handleLogin = () => {
  const encryptedPassword = md5(form.value.password);
  const submitData = {
    account: form.value.account,
    password: encryptedPassword
  };

  store.dispatch('Login', submitData).then((isLogin) => {
    if (isLogin) {
      // 根据复选框状态存储账号
      if (rememberAccount.value) {
        localStorage.setItem('rememberedAccount', form.value.account);
      } else {
        localStorage.removeItem('rememberedAccount');
      }

      showToast({
        type: 'success',
        message: '登录成功',
        forbidClick: true
      });

      setTimeout(() => {
        router.replace('/homePage')
      }, 1000);
    }
  }).catch((error) => {
    showToast({
      type: 'fail',
      message: error.desc || '登录失败',
      forbidClick: true
    });
  });
}
</script>

<style>
:root:root {
  --van-cell-vertical-padding: 12px;
}
</style>

<style lang="scss" scoped>
.page-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #23a6d5, #23d5ab);

  .form-wrapper {
    width: 85%;
    max-width: 400px;

    .title {
      text-align: center;
      margin-bottom: 40px;
      color: white;
      font-size: 25px;
    }

    .oval-field {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      border-radius: 25px;
      background: #fff;
      opacity: .5;

      :deep(.van-field__left-icon) {
        margin-left: 15px;
        color: #3a7bd5;
      }
    }

    .remember-me {
      margin: 15px 0;
      :deep(.van-checkbox__label) {
        color: white;
      }
      font-size: 14px;
    }

    .oval-btn {
      margin-top: 20px;
      border-radius: 25px;
      background-color: #ffffff;
      color: #23a6d5;
      border: none;
    }

    .link-group {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-size: 14px;

      span {
        cursor: pointer;
        transition: opacity 0.3s;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
